import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { Outlet, useNavigate } from 'react-router-dom'
import './index.css'

function App() {
  const nav=useNavigate()
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
     
    },
    {
      key: '/order',
      title: '订单',
      icon: <UnorderedListOutline />,
     
    },
  
  ]
  return (
    <div>
     <Outlet></Outlet>
      <div className='button'>
      <TabBar onChange={(key) => {
      nav(key)
      }}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
        </div>
    </div>
  )
}

export default App
